<template>
  <div class="background" :style="styles"></div>
  <div class="security-login">
    <a-form
      ref="formRef"
      :model="user"
      :rules="rules"
      :wrapper-col="wrapperCol"
      style="
        margin-top: -30px;
        width: 40%;
        min-width: 500px;
        max-width: 700px;
        box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.05);
        border-radius: 15px;
        padding: 20px;
        height: 480px;
        color: rgba(255, 182, 193);
        justify-content: center;
        align-items: center;
      "
    >
      <h1
        style="
          text-align: center;
          font-family: 黑体;
          font-size: 60px;
          font-weight: bold;
          color: rgba(0, 0, 0);
          margin: 30px auto;
        "
      >
        连锁超市管理系统
      </h1>
      <a-form-item name="u_id">
        <a-input v-model:value="user.u_id">
          <template #prefix>账号：</template>
        </a-input>
      </a-form-item>

      <a-form-item name="u_pwd">
        <a-input-password v-model:value="user.u_pwd">
          <template #prefix>密码：</template>
        </a-input-password>
      </a-form-item>

      <a-form-item :wrapper-col="wrapperCol" style="padding-bottom: 50px">
        <a-button type="primary" block @click="login"> <div style="color: rgba(0, 0, 0);">登录</div> </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>



<script>
import { ref, reactive, defineComponent } from "vue";

//引入自定义封装的函数或对象
import { post, setLocalToken, tip } from "@/common";

import { useRouter } from "vue-router";
import picture from "/000.jpeg";
export default defineComponent({
  name: "background",
  data() {
    return {
      styles: {
        backgroundImage: `url(${picture})`,
      },
    };
  },
  setup() {
    const router = useRouter(); //获取路由器

    const activeKey = ref("1"); //ref函数用于将数封装为单向绑定（数据-》界面）

    const formRef = ref(); //此变量会自动与元素中ref="formRef"产生关联，以后此变量就表示元素对象
    const registerRef = ref();

    //reactive函数用于将数据封装为双向绑定（数据《==》界面）
    const user = reactive({
      u_id: "",
      u_pwd: "",
    });

    const rules = {
      u_id: [
        {
          required: true,
          message: "请输入账号！",
          trigger: "blur",
        },
        {
          min: 3,
          max: 10,
          message: "账号必须为3~10个字符构成！",
          trigger: "blur",
        },
      ],
      u_name: [
        {
          required: true,
          message: "请输入姓名！",
          trigger: "blur",
        },
      ],
      u_pwd: [
        {
          required: true,
          message: "请输入密码！",
          trigger: "blur",
        },
      ],
    };

    const login = () => {
      formRef.value
        .validate()
        .then(() => {
          //then方法仅接收成功操作的结果
          post("/security/login", user).then((res) => {
            tip.success("登录成功！");

            const token = res.data; //获取返回的令牌

            //将令牌存储于本地
            setLocalToken(token);

            //跳转至/home路由
            router.push({ path: "/home" });
          });
        })
        .catch((error) => {
          tip.error("输入信息缺失或不正确！");
        });
    };

    //一行24列
    const wrapperCol = {
      offset: 5,
      span: 14,
    };

    return {
      //声明数据和方法
      router,
      activeKey,
      formRef,
      registerRef,
      user,
      rules,
      login,
      wrapperCol,
    };
  },
});
</script>


<style scoped>
.security-login {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  position: absolute;
}
.background {
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  z-index: -1;
  position: absolute;
  align-items: center;
}
</style>